<template>
  <div>
    <PageTools :show-before="true">
      <span slot="before">共{{ Employeetotal }}条记录</span>
      <template slot="after">
        <el-button
          size="small"
          type="warning"
          @click="$router.push('/import')"
        >导入</el-button>
        <el-button
          size="small"
          type="danger"
          @click="ExportExcelFn"
        >导出</el-button>
        <el-button
          v-if="checkPerm('addEmployees')"
          size="small"
          type="primary"
          @click="showDialog = true"
        >新增员工</el-button>
      </template>
    </PageTools>
    <el-card>
      <el-table border :data="EmployeeList">
        <el-table-column label="序号" sortable="" type="index" />
        <el-table-column label="姓名" sortable="" prop="username" />
        <el-table-column label="头像" sortable="" prop="staffPhoto" width="200">
          <template #default="{ row }">
            <img
              v-fiximg="require('@/assets/common/bigUserHeader.png')"
              :src="row.staffPhoto"
              alt=""
              style="width: 180px; height: 150px"
              @click="Showmycode(row.staffPhoto)"
            >
          </template>
        </el-table-column>
        <el-table-column label="工号" sortable="" prop="workNumber" />
        <el-table-column
          label="聘用形式"
          sortable=""
          prop="formOfEmployment"
          :formatter="formatterEmployee"
        />
        <el-table-column label="部门" sortable="" prop="departmentName" />
        <el-table-column label="入职时间" sortable="" prop="timeOfEntry">
          <template #default="obj">
            {{ obj.row.timeOfEntry | formatDate }}
          </template>
        </el-table-column>
        <el-table-column label="账户状态" sortable="" prop="enableState">
          <template #default="obj">
            <el-switch
              v-model="obj.row.enableState"
              :active-value="1"
              :inactive-value="0"
              disabled
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" sortable="" fixed="right" width="280">
          <template #default="{ row }">
            <el-button
              type="text"
              size="small"
              @click="$router.push(`/employees/detail/${row.id}`)"
            >查看</el-button>
            <el-button type="text" size="small">转正</el-button>
            <el-button type="text" size="small">调岗</el-button>
            <el-button type="text" size="small">离职</el-button>
            <el-button
              type="text"
              size="small"
              @click="Assignrole(row)"
            >角色</el-button>
            <el-button
              v-if="checkPerm('delEmployees')"
              type="text"
              size="small"
              @click="DelItem(row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination
          align="right"
          :page-size="pageConfig.size"
          layout="prev, pager, next"
          :total="Employeetotal"
          :current-page.sync="pageConfig.page"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </el-card>
    <AddEmployeeItem :show-dialog.sync="showDialog" />
    <el-dialog title="二维码" :visible="isshowcode" @close="isshowcode = false">
      <el-row type="flex" justify="center">
        <canvas ref="showCode" />
      </el-row>
    </el-dialog>
    <assignrole ref="assignrole" :isshowassignrole.sync="isshowassignrole" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getEmployeeList, DelEmployee } from '@/api/employees'
// import { Getemployeeinformation } from '@/api/user'
import employees from '@/api/constant/employees.js'
import { formatDate } from '@/filters'
import { export_json_to_excel } from '@/vendor/Export2Excel.js'
import AddEmployeeItem from '@/views/employees/components/addEmployeeItem.vue'
import QRCode from 'qrcode'
import assignrole from '@/views/employees/components/assignrole.vue'
export default {
  components: {
    AddEmployeeItem,
    assignrole
  },
  data() {
    return {
      pageConfig: {
        page: 1, size: 5
      },
      showDialog: false,
      isshowcode: false,
      isshowassignrole: false,
      roleIds: []
    }
  },
  computed: {
    ...mapGetters(['EmployeeList', 'Employeetotal'])
  },
  created() {
    this.get_EmployeeList()
  },
  methods: {
    async Assignrole(row) {
      await this.$refs.assignrole.GetcheckList(row.id)
      this.isshowassignrole = true
    },
    Showmycode(url) {
      if (url) {
        this.isshowcode = true
        this.$nextTick(() => {
          QRCode.toCanvas(this.$refs.showCode, url, {
            width: 300,
            color: {
              dark: '#65b1ff'
            }
          })
        })
      }
    },
    async get_EmployeeList() {
      await this.$store.dispatch('employees/getEmployeeList', this.pageConfig)
    },
    async ExportExcelFn() {
      const { rows } = await getEmployeeList({ page: 1, size: this.Employeetotal })
      const headerlist = {
        id: 'id',
        mobile: '手机号',
        username: '姓名',
        password: '密码',
        workNumber: '工号',
        correctionTime: '转正日期',
        timeOfEntry: '入职日期',
        formOfEmployment: '聘用形式',
        departmentName: '部门',
        staffPhoto: '头像'
      }
      var data = []
      var header = []
      await rows.forEach((item, index) => {
        const newArr = []
        for (const i in headerlist) {
          if (item[i] === undefined && i !== 'timeOfEntry') {
            newArr.push('')
          } else if (i === 'formOfEmployment') {
            const obj = employees.hireType.find(items => Number(items.id) === Number(item[i]))
            newArr.push(obj ? obj.value : '未知')
          } else if (i === 'timeOfEntry' || i === 'correctionTime') {
            newArr.push(formatDate(item[i]))
          } else {
            newArr.push(item[i])
          }
        }
        data.push(newArr)
      })
      for (const b in headerlist) {
        header.push(headerlist[b])
      }
      await export_json_to_excel({ header, data })
    },

    async  handleCurrentChange(newpage) {
      this.pageConfig.page = newpage
      await this.$store.dispatch('employees/getEmployeeList', this.pageConfig)
    },
    formatterEmployee(row, col, cellval) {
      const obj = employees.hireType.find(item => Number(item.id) === Number(cellval))
      return obj ? obj.value : '未知'
    },
    async DelItem(row) {
      await this.$confirm('您确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await DelEmployee(row.id)
      if (this.EmployeeList.length <= 1 && this.pageConfig.page !== 1) {
        this.pageConfig.page -= 1
      }
      await this.get_EmployeeList()
      this.$message({
        message: '删除成功!',
        type: 'success'
      })
    }
  }
}
</script>

<style>
</style>
